<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<h1>点击按钮请求XML数据</h1>
<h3>person1.xml的XML的文本信息如下</h3>
<p>标题：<span id="bt_1"></span></p>
<p>姓名：<span id="xm_1"></span></p>
<p>头衔：<span id="tx_1"></span></p>
<p>成就：<span id="cj_1"></span></p>
<p>简述：<span id="js_1"></span></p>
<button type="button" id="btn_1">读取XML的文本内容</button>
<script type="text/javascript">
    document.getElementById("btn_1").onclick = () => {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "person1.xml");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var obj = xhr.responseXML;
                var bt = obj.getElementsByTagName("note")[0].innerHTML
                document.getElementById("bt_1").innerHTML = bt;
                bt = obj.getElementsByTagName("name")[0].innerHTML
                document.getElementById("xm_1").innerHTML = bt;
                bt = obj.getElementsByTagName("tag")[0].innerHTML
                document.getElementById("tx_1").innerHTML = bt;
                bt = obj.getElementsByTagName("achievement")[0].innerHTML
                document.getElementById("cj_1").innerHTML = bt;
                bt = obj.getElementsByTagName("describe")[0].innerHTML
                document.getElementById("js_1").innerHTML = bt;
            }
        }
    }
</script>
<hr>
<h3>person2.xml的XML的文本信息如下</h3>
<p>标题：<span id="bt_2"></span></p>
<p>姓名：<span id="xm_2"></span></p>
<p>头衔：<span id="tx_2"></span></p>
<p>成就：<span id="cj_2"></span></p>
<p>简述：<span id="js_2"></span></p>
<button type="button" id="btn_2">读取XML的文本内容</button>
<script>
    document.getElementById("btn_2" +
        "").onclick = function(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET","person2.xml",true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if (xhr.readyState==4 && xhr.status==200) {
                var obj = xhr.responseXML;
                var note = obj.getElementsByTagName("person")[0].getAttribute("note");
                document.getElementById("bt_2").innerHTML = note;
                var name = obj.getElementsByTagName("person")[0].getAttribute("name");
                document.getElementById("xm_2").innerHTML = name;
                var tag = obj.getElementsByTagName("person")[0].getAttribute("tag");
                document.getElementById("tx_2").innerHTML = tag;
                var achievement = obj.getElementsByTagName("person")[0].getAttribute("achievement");
                document.getElementById("cj_2").innerHTML = achievement;
                var describe = obj.getElementsByTagName("person")[0].getAttribute("describe");
                document.getElementById("js_2").innerHTML = describe;
            }
        }
    }
</script>
</body>
</html>
